<script setup>
import $ from "jquery";
import {ref} from "vue";
import ContentBase from "@/components/ContentBase.vue";
import {ElMessage} from "element-plus";

const UserCFData = ref();
const ItemCFData = ref();

const userId = ref();
const ItemId = ref();



const UserCF = () => {
    $.ajax({
        url: "http://localhost:7012/api/recommend/user/" + userId.value,
        type: "get",
        success(resp) {
            if (resp.errorCode === "00000") {
                UserCFData.value = resp.data;
                console.log(resp);
                ElMessage.success("推荐成功")
            }else {
                console.log(resp);
            }
        },
        error(resp) {
            console.log(resp)
        }
    });
}

const ItemCF = () => {
    $.ajax({
        url: "http://localhost:7012/api/recommend/product/" + ItemId.value,
        type: "get",
        success(resp) {
            if (resp.errorCode === "00000") {
                ItemCFData.value = resp.data;
                console.log(resp.data);
                ElMessage.success("推荐成功")
            }else {
                console.log(resp)
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}
</script>

<template>
    <ContentBase>
        <div class="row">
            <div class="col-9">
                <h3 style="font-weight: bold;">推荐列表</h3>
            </div>
        </div>
        <hr class="border  border-1 opacity-75">

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="row text-center">
                            <form @submit.prevent="UserCF">
                                <div class="mb-3">
                                    <label for="UserId" class="form-label">基于用户推荐:</label>
                                    <input v-model="userId" type="text" class="form-control" id="UserId">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>

                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">id</th>
                                <th scope="col">name</th>
                                <th scope="col">amount</th>
                                <th scope="col">price</th>
                                <th scope="col">scope</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="user in UserCFData" >
                                <td>{{ user.id }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.amount }}</td>
                                <td>{{ user.price }}</td>
                                <td>{{ user.state }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <hr class="border  border-1 opacity-75">
        <br>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="row text-center">
                            <form @submit.prevent="ItemCF">
                                <div class="mb-3">
                                    <label for="ItemId" class="form-label">基于商品推荐</label>
                                    <input v-model="ItemId" type="text" class="form-control" id="ItemId">
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>

                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">id</th>
                                <th scope="col">name</th>
                                <th scope="col">amount</th>
                                <th scope="col">price</th>
                                <th scope="col">scope</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in ItemCFData" >
                                <td>{{ item.id }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.amount }}</td>
                                <td>{{ item.price }}</td>
                                <td>{{ item.state }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </ContentBase>

</template>

<style scoped>

</style>